<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx }/res/css/main.css">
    <link rel="stylesheet" href="${ctx }/res/css/plugins.css">
    <title>软装到家</title>
    <script type="text/javascript" src="${ctx }/res/js/lib.js"></script>
    <link rel="stylesheet" href="${ctx }/res/hplus/js/plugins/layer/skin/layer.css">
    <style type="text/css">
	    .layui-layer-dialog .layui-layer-content {
			color:black;
		}
		a {
			cursor:pointer;
		}
    </style>
    <script type="text/javascript">
    function changeProvince(obj) {
       	var provinceId = $(obj).val();
       	$('.city').html('');
       	$('.district').html('');
       	if (provinceId != '') {
       		$.ajax({
       			url: "${ctx}/user/findArea?provinceId=" + provinceId,
       			dataType: "json",
       			success: function(array) {
       				var cities = $('.city');
       				for(var i = 0;i < cities.length;i ++ ) {
       					var city = cities[i];
       					$(city).append('<option value="">城市</option>');
           				for (var j = 0; j < array.length; j ++ ) {
           					var obj = array[j];
           					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
           					$(city).append(option);	
           				}
       				}
       			}
       		});
       	}
       }

       function changeCity(obj) {
       	var cityId = $(obj).val();
       	$('.district').html('');
       	if (cityId != '') {
       		$.ajax({
       			url: "${ctx}/user/findArea?cityId=" + cityId,
       			dataType: "json",
       			success: function(array) {
       				var districts = $('.district');
       				for(var i = 0;i < districts.length;i ++ ) {
       					var district = districts[i];
	       				$(district).append('<option value="">地区</option>');
	       				for (var j = 0; j < array.length; j++) {
	       					var obj = array[j];
	       					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
	       					$(district).append(option);	
	       				}
       				}
       			}
       		});
       	}
       }
    </script>
</head>
<body>
 <!--顶部工具条-->
<div class=" w-100p mini-top-bar">
    <div class="w-1200 margin-0-auto">
        <ul class="nav-left fl">
            <li class="home"><a href="${ctx }">欧工首页</a></li>
            <c:choose>
	        	<c:when test="${currentUser == null}">
	        		<li class="login"><a href="${ctx}/user/login">登录</a></li>
            		<li class="register"><a href="${ctx }/user/register">注册</a></li>
	        	</c:when>
	        	<c:otherwise>
	        		<li class="login" style="color:black;">欢迎您,${currentUser.realName }!<span style="color:blue;cursor:pointer" onclick="javascript:location.href='j_spring_security_logout'">【退出登录】</span></li>
	        	</c:otherwise>
        	</c:choose>
        </ul>
        <ul class="nav-right fr">
            <li class="order"><a href="${ctx }/admin/index?target=/order/myOrder">我的订单</a></li>
            <li class="account"><a href="${ctx }/admin/index">个人中心</a></li>
            <li class="downapp"><a href="#">下载APP</a></li>
        </ul>
    </div>
</div>


<!--logo 和tags-->
<div class="w-1200 sub-nav margin-0-auto">
    <a class="logo" href="#"><img src="${ctx }/res/img/icon/checkout-logo.png"></a>
     <div class="searchbar-warp-min checkout">
         <div class="searchbar">
             <form>
                 <span class="icon-serach"></span>
                 <input class="serach-input" type="text" value="沙发" placeholder="请输入关键字">
                 <button class="serach-btn" type="submit">搜索</button>
             </form>
         </div>
      </div>
</div><h1 class="checkout-title w-1200 margin-0-auto">填写并核对订单行信息</h1>
<form id="checkoutForm">
<div class="checkout-warp w-1200 margin-0-auto">
    <h3 class="h3">收货人信息</h3>
    <a href="javascript:void(0)" class="new-address js-newaddress">新增收货人地址</a>
    <ul class="add-list js-add-list" id="addressList">
       <c:if test="${addresses.size() > 0 }">
	       <c:forEach items="${addresses }" var="a" varStatus="as">
	       		<c:choose>  
				   <c:when test="${as.index == 0	 }">
				   	<li>
				   </c:when>  
				   <c:otherwise>
				   	<li style="display:none;">
				   </c:otherwise>  
				</c:choose>
				<c:choose>  
				   <c:when test="${a.isDefault == true}">
				   	<label class="address-item js-address-item selected">
				   </c:when>  
				   <c:otherwise>
				   	<label class="address-item js-address-item">
				   </c:otherwise>  
				</c:choose>
		               <input type="radio" name="address" value="${a.id }" />
		               <span>${a.name }</span>
		               <span>${a.province.name }</span>
		           </label>
		           <span>${a.name }   ${a.province.name }${a.city.name }   ${a.address }    ${a.mobile }</span>
		       </li>
	       </c:forEach>
	     </c:if>
	     <c:if test="${addresses.size() <= 0 }">
	     	<li>
	     		<span>您还没有设置接收地址，请点击右上角添加按钮进行常用地址添加</span>
	     	</li>
	     </c:if>
    </ul>
    <a class="show-more js-show-more">更多地址</a>
    <div class="bottom-line"></div>
    <h3 class="h3">支付方式</h3>
     <div class="pay-panel tab-box">
         <ul class="nav-tabs">
             <li class=""><a data-target="#online">线上支付</a></li>
             <li class="active" ><a data-target="#offline">线下转账</a></li>
         </ul>
         <div class="tab-content">
             <div  class="tab-pane active" id="online">
                 <!-- <span class="pay-way js-pay-way" value="0">微信支付</span> -->
                 <span class="pay-way js-pay-way" value="1">支付宝支付</span>
                 <span class="pay-way js-pay-way" value="2">银联支付</span>
             </div>
             <div  class="tab-pane" id="offline">
                 <span class="pay-way js-pay-way" value="3" style="height:auto;text-align:left;">
                 	<div>招商银行一般户账号：1209 0994 6810 803（120909946810803）</div>
                 	<div>账户名：广东欧工软装设计配套有限公司</div>
                 	<div>开户银行：招商银行东莞旗峰支行</div>
                 </span>
             </div>
         </div>
     </div>
    <div class="bottom-line"></div>
    <h3 class="h3">商品清单</h3>
    <table class="bill">
        <thead>
            <tr>
                <th>商品信息</th>
                <th width="150px">单价(元)</th>
                <th width="150px">数量</th>
                <th width="150px">金额(元)</th>
                <th width="150px">配送方式</th>
            </tr>
        </thead>
        <tbody class="js-bill-table">
        	<c:set value="0" var="sumTotal" />
        	<c:forEach items="${carts }" var="c" varStatus="stat">
        		<c:set value="${sumTotal+c.specification.realPrice*c.quantity }" var="sumTotal" />
        		<tr value="${c.id }">
	              <td>
	              <div class="img ">
	                <a href="${ctx }/product/detail?id=${c.product.id}&specificationId=${c.specification.id}" target="_blanck"><img src="${c.product.headImage }"></a>
	              </div>
	              <div class="goods-info fl">
	                <p class="f14"><a href="${ctx }/product/detail?id=${c.product.id}&specificationId=${c.specification.id}" target="_blanck">${c.product.name }</a></p>
	                <!-- <span class="">
	                            <i class="icon icon-jin">金</i>
	                            <i class="icon icon-fu">服</i>
	                            <i class="icon icon-xian">险</i>
	                </span> -->  
	              </div>
	                  <div class="sku   f14">颜色分类：${c.specification.spec2 }${c.specification.spec1 }</div>
	              </td>
	              <td>￥<span class="js-price"><fmt:formatNumber value="${c.specification.realPrice }" type="currency" pattern="0.00"/></span></td>
	              <td><div class="count"><span class="reduce js-reduce">-</span><input class="count-input js-number" type="text" value="${c.quantity }"><span class="add js-add">+</span></div></td>
	              <td>￥<span class="price js-total"><fmt:formatNumber value="${c.specification.realPrice*c.quantity }" type="currency" pattern="0.00"/></span></td>
	              <td>
	                  <label class="radio-elem"><input name="wuliu" type="radio"><i class="radio-icon"></i>快递</label>
	                  <label class="radio-elem"><input name="wuliu" type="radio"><i class="radio-icon"></i>EMS</label>
	              </td>
	          </tr>
        	</c:forEach>
        </tbody>
    </table>
    <h3 class="h3">添加订单备注</h3>
    <div class="remark">
        <input type="text" name="remark" >
    </div>
    <div class="bottom-line"></div>
    <h4 class="h4">发票信息<span>(如需开发票请先与商家联系)</span></h4>
    <div class="ticket">
        <label class="radio-elem"><input name="ticket" type="radio" value="0"><i class="radio-icon"></i>不开发票</label>
        <label class="radio-elem"><input name="ticket" type="radio" value="1"><i class="radio-icon"></i>普通发票</label>
        <label class="radio-elem"><input name="ticket" type="radio" value="2"><i class="radio-icon"></i>增值税发票</label>
    </div>
    <div class="bottom-line"></div>
    <div class="sumary">
        <p><span>${carts.size() }</span>件商品,总商品金额：￥<span class="amount js-bill-amount"><fmt:formatNumber value="${sumTotal }" type="currency" pattern="0.00"/></span></p>
        <p>运费：￥<span class="amount js-fare">0.00</span></p>
    </div>
</div> 
<div class="bill-sumary w-1200 margin-0-auto">
    <div  class="amount">应付总额：<span class="js-pay-amount">￥<fmt:formatNumber value="${sumTotal+0 }" type="currency" pattern="0.00"/></span></div>
    <div class="address">寄送至:<span class="js-address"></span></div>
</div>
<div class="w-1200 margin-0-auto btn-warp">
    <button class="btn btn-primary checkout-submit">提交订单</button>
</div>
</form>
<%@include file="../foot.jsp" %>
<div style="display: none;" id="js-add-newaddresss-modal">
	<form>
	    <div class="newaddresss-modal">
	        <div class="form-groups">
	            <div class="form-controller">
	                <label class="form-label icon-required">收货人:</label>
	                <input class="form-input" name="name" required>
	            </div>
	            <div class="form-controller">
	                <label class="form-label icon-required">所在地:</label>
	                <select class="form-input province" name="province.id" id="provinceId" onchange="changeProvince(this);" required>
		            	<option value="">请选择省份</option>
		                <c:forEach items="${provinces }" var="p">
							<option value="${p.id }">${p.name }</option>
						</c:forEach>
		            </select>
		            <select class="form-input city" name="city.id" id="cityId" onchange="changeCity(this);" required>
		                <option value="">请选择城市</option>
		            </select>
		            <select class="form-input district" name="district.id" id="districtId">
		                <option value="">请选择区县</option>
		            </select>
	            </div>
	            <div class="form-controller">
	                <label class="form-label icon-required">详细地址:</label>
	                <input class="form-input" name="address" required style="width: 445px;">
	            </div>
	
	            <div class="form-controller">
	                <label class="form-label icon-required">手机号码:</label>
	                <input class="form-input" name="mobile" required>
	            </div>
	            <div class="form-controller">
	                <label class="form-label">&nbsp;</label>
	                <label class="radio-elem f14"><input type="checkbox" id="defaultStatus" /><i class="radio-icon"></i>设为默认地址</label>
	            </div>
	            <div class="form-controller">
	                <label class="form-label">&nbsp;</label>
	                <button class=" btn btn-primary submit js-submit-newaddress">保存收货信息</button>
	            </div>
	        </div>
	    </div>
    </form>
</div>
<script type="text/javascript">
    $(document).ready(function () {
       window.checkout && checkout.init && checkout.init();
    });
    $('.checkout-submit').on('click',function() {   //结算并生成订单信息
    	//收货地址
    	var json = {};
    	var choosenAddress = $('.address-item.selected');
    	var addressId = $(choosenAddress[0]).find("input[type='radio']").val();
    	json["addressId"] = addressId;
    	//支付方式
    	var choosenPayType = $('.pay-way.selected');
    	var payType = $(choosenPayType[0]).attr("value");
    	json["payType"] = payType;
    	//订单备注
    	var remark = $('input[name="remark"]').val();
    	json["remark"] = remark;
    	//应付总额
    	var totalAmount = $('.js-pay-amount').html();
    	json["totalPay"] = totalAmount.substring(1);
    	//购物信息
    	var cartTrs = $('.js-bill-table tr');
    	var cartInfo = '';
    	for(var i = 0;i < cartTrs.length;i ++ ){
    		var cartTr = $(cartTrs[i]);
    		var cartId = cartTr.attr("value");
    		var count = cartTr.find(".count-input").val();
    		cartInfo += cartId + "-"+count+",";
    	}
    	//发票信息
    	json["cartInfo"] = cartInfo;
    	var invoiceType = $('input[name="ticket"]:checked');
    	json["invoiceType"] = invoiceType.attr("value");
    	$.ajax({
    		url: "/order/checkoutOrder",
    		data:json,
    		dataType: "json",
    		async:"false",
    		type: "post",
    		success: function(data) {
    			if (data.success) {
    				//loading带文字
    				var orderId = data.orderId;
    				if(!orderId) {
    					orderId = '';
    				}
    				var payType = data.payType;
    				var payBizType = data.payBizType;
    				var amount = data.amount;
    				var userId = data.userId;
    				var orderIds = data.orderIds;
    				if(payType != '3') {
    					location="${ctx}/pay/gotoPay?payType="+payType+"&payBizType="+payBizType+"&orderId="+orderId+"&amount="+amount+"&userId="+userId+"&orderIds="+orderIds;
    				} else {
    					location = '${ctx }/admin/index?target=/order/myOrder';
    				}
    				status = true;
    			} else {
    				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
    			}
    		}
    	});
    	return false;
    });
</script>
<script type="text/javascript" src="${ctx }/res/js/plugins.js"></script>
<script type="text/javascript" src="${ctx }/res/js/common.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script src="${ctx }/res/hplus/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.tab-box').tab();  
        
    })
</script>
</body>
</html>
